<template>
  <el-container>
    <PerformanceMonitor ref="performanceMonitorRef" />
    <el-aside width="300px">
      <Aside />
    </el-aside>
    <el-main ref="graphRef">
      <Template3D />
      <ViewTools />
    </el-main>
    <el-main ref="graphRef" />
  </el-container>
</template>

<script lang="ts" setup>
import Template3D from './graph/Template.vue'
import Aside from './ui/Aside/index.vue'
import ViewTools from './ui/view-tools/index.vue'
import { useSnapshotStore } from '@/store/3d/snapshot'
import PerformanceMonitor from '@/components/PerformanceMonitor.vue'
import { useRenderLoop } from '@tresjs/core'
// import Stage from '@/graph/3d/index'

// const graphRef = ref()
// const stage = ref<Stage>(null)

// onMounted(() => {
//   stage.value = new Stage(graphRef.value.$el)
//   stage.value.init()
// })

const performanceMonitorRef = ref()
const snapshotStore = useSnapshotStore()
const { onLoop } = useRenderLoop()

onLoop(() => {
  performanceMonitorRef.value?.update()
})

onMounted(() => {
  // stage.value?.destroy()
  // snapshotStore.initSnapshotDatabase();
})
</script>

<style scoped>
.el-aside {
  border-right: 1px solid #ccc;
}

.el-main {
  padding: 0;
  position: relative;
}
</style>
